<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom操作</title>
</head>
<body>
<script>
    /*
    * 将HTML字符穿转成dom
    * 1. 判断HTML字符合法性
    * 2. 检查标签闭合是否规范
    * 3. 使用innerHTML将这段HTML插入到虚拟DOM中
    * 4. 提取该DOM节点
    * */
    const tags = /^(area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i;

    // 检查自闭和标签是否合法 <table/>就不合法，要转换<table></table>
    function convert(html) {
        return html.replace(/(<(\w+)[^>]*?)\/>/g, (full, front, tag) => {
            return tags.test(tag) ? full : front + '></' + tag + ">";
        })
    }

    // console.log(convert('<br/>'));
    // console.log(convert('<table/>'));

    // 将元素标签转换成一系列DOM节点, 并且插入到fragment中
    function getNodes(htmlString, doc, fragment) {
        const map = {
            "<td": [3, "<table><tbody><tr>", "</tr></tbody></table>"],
            "<th": [3, "<table><tbody><tr>", "</tr></tbody></table>"],
            "<tr": [2, "<table><thead>", "</thead></table>"],
            "<option": [1, "<select multiple>", "</select>"],
            "<optgroup": [1, "<select multiple>", "</select>"],
            "<legend": [1, "<fieldset>", "</fieldset>"],
            "<thead": [1, "<table>", "</table>"],
            "<tbody": [1, "<table>", "</table>"],
            "<tfoot": [1, "<table>", "</table>"],
            "<colgroup": [1, "<table>", "</table>"],
            "<caption": [1, "<table>", "</table>"],
            "<col": [2, "<table><tbody></tbody><colgroup>", "</colgroup></table>"]
            // 分别指示元素相对父节点的深度，包裹元素的前部分和后部分
        };
        const tagName = htmlString.match(/<\w+/);
        let mapEntry = tagName?map[tagName[0]]:null;
        if(!mapEntry){
            // 不是需要包裹的元素
            mapEntry = [0,'','']
        }
        let div = (doc||document).createElement('div');
        div.innerHTML = mapEntry[1]+htmlString+mapEntry[2];
        console.log(div);
        while(mapEntry[0]--){
            div = div.lastChild;
        }
        // 如果有fragment的话，把更新的节点放入Fragment，div里面就没有了
        if(fragment){
            while (div.firstChild){
                fragment.append(div.firstChild)
            }
        }
        return div.childNodes;
    }
</script>
</body>
</html>
